<!-- 地图-位置 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="位置" name="1">
            <div class="map-address-wrap">
                <template v-if="!widget.widgetData.eles.customFeature[':segment']">
                    <div class="content-wrap">
                        <el-amap
                            ref="mapRef"
                            :center="mapCenter"
                            :zoom="12"
                            @click="onClickMap"
                        >
                            <el-amap-search-box :visible="false" />
                            <el-amap-marker :position="mapCenter"/>
                        </el-amap>
                    </div>

                    <div class="search-wrap">
                        <div class="search-content-wrap">
                            <el-autocomplete
                                v-model="mapSearchValue"
                                :fetch-suggestions="onSearch"
                                value-key="name"
                                placeholder="搜索地址"
                                class="search-content"
                                @select="onSelectPoi"
                            />
                        </div>
                        <div class="search-btn">
                            <el-button type="primary" @click="onPanToMarker">定位</el-button>
                        </div>
                    </div>

                    <el-divider></el-divider>
                </template>

                <layout-pane label="经度纬度">
                    <el-input
                        :modelValue="`${lng || ''},${lat}`"
                        @update:modelValue="val => {
                            lng = val?.split(',')?.[0] || '';
                            lat = val?.split(',')?.[1] || '';
                        }"
                        placeholder="图片地址"
                    />
                </layout-pane>

                <el-divider></el-divider>
                <layout-pane label="位置文字">
                    <el-input v-model="widget.widgetData.eles.content"  placeholder="请输入显示地址" />
                </layout-pane>

                <el-divider></el-divider>
                <layout-pane label="显示地图">
                    <el-switch v-model="type" />
                </layout-pane>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
export default defineComponent({
    name: 'MapAddress',
    components: {
        LayoutPane
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const mapRef = ref(null)
        const mapSearchValue = ref('')

        const type = computed({
            get: () => widget.value.widgetData.eles.customFeature.type === 'withmap',
            set: val => {
                widget.value.widgetData.eles.style.height = val ? '150px' : ''
                widget.value.widgetData.eles.customFeature.type = val ? 'withmap' : 'withoutmap'
            }
        })
        const lng = computed({
            get: () => widget.value.widgetData.eles.customFeature.lng,
            set: val => widget.value.widgetData.eles.customFeature.lng = val
        })
        const lat = computed({
            get: () => widget.value.widgetData.eles.customFeature.lat,
            set: val => widget.value.widgetData.eles.customFeature.lat = val
        })
        const address = computed({
            get: () => widget.value.widgetData.eles.customFeature.address,
            set: val => widget.value.widgetData.eles.customFeature.address = val
        })
        const mapCenter = computed(() => [lng.value, lat.value])

        // 点击地图
        const onClickMap = e => {
            lng.value = e.lnglat.lng
            lat.value = e.lnglat.lat
            getAddress(lng.value, lat.value)
        }

        // // 定位
        // const onGeolocation = () => {
        //     const geolocation = new AMap.Geolocation()
        //     geolocation.getCurrentPosition((status, result) => {
        //         console.log(status, result)
        //     })
        // }

        // 获取地址字符串
        const getAddress = (lng, lat) => {
            // 这里通过高德 SDK 完成
            const geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: 'all'
            })
            geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    if (result && result.regeocode) {
                        address.value = result.regeocode.formattedAddress
                        // mapSearchValue.value = result.regeocode.formattedAddress
                    }
                }
            })
        }

        const onSearch = (queryString, cb) => {
            const autocomplete = new AMap.Autocomplete()
            autocomplete.search(queryString, (status, result) => {
                const list = result?.tips || []
                cb(list)
            })
        }

        // 选中某个POI信息
        const onSelectPoi = data => {
            // 构造地点查询类
            const placeSearch = new AMap.PlaceSearch({
                map: mapRef.value.$$getInstance(),
                city: data.adcode,
                pageSize: 1,
                extensions: 'all'
            })
            // 关键字查询查询
            placeSearch.search(data.name, (status, result) => {
                if (status !== 'complete') return
                const location = result?.poiList?.pois?.[0]?.location || {}
                lng.value = location.lng
                lat.value = location.lat
                getAddress(lng.value, lat.value)
            })
            // lng.value = data.location.lng
            // lat.value = data.location.lat
            // getAddress(lng.value, lat.value)
        }

        // 平移至点的位置
        const onPanToMarker = () => {
            mapRef.value.$$getInstance().panTo([lng.value, lat.value])
        }

        return {
            widget,
            mapRef,
            mapSearchValue,
            type,
            lng,
            lat,
            mapCenter,

            onClickMap,
            onSearch,
            onSelectPoi,
            onPanToMarker
        }
    }
})
</script>

<style lang="less" scoped>
.map-address-wrap {
    .content-wrap {
        height: 220px;
        border: 2px solid var(--edit-border-color);
        box-sizing: border-box;
    }
    .search-wrap {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .search-content-wrap {
            flex: 1;
            margin-right: 10px;
            ::v-deep(.search-content) {
                width: 100%;
            }
        }
        .search-btn {
            // 
        }
    }
}
</style>